<template>
  <div>
    <!--    <el-form>-->
    <!--      <el-form-item>-->
    <!--        <el-select v-model="mid" placeholder="请选择地点">-->
    <!--          <el-option label="" value=""></el-option>-->
    <!--          <el-option-->
    <!--            v-for="item in findMidList"-->
    <!--            :key="item.id"-->
    <!--            :label="item.address"-->
    <!--            :value="item.id"-->
    <!--          />-->
    <!--        </el-select>-->
    <!--        <el-select-->
    <!--          v-model="id"-->
    <!--          placeholder="请选择电站"-->
    <!--          @click="powerLists(mid)"-->
    <!--        >-->
    <!--          <el-option label="" value=""></el-option>-->
    <!--          <el-option-->
    <!--            v-for="item in findPowerList"-->
    <!--            :key="item.id"-->
    <!--            :label="item.powerName"-->
    <!--            :value="item.id"-->
    <!--          />-->
    <!--        </el-select>-->
    <!--        <el-select-->
    <!--          v-model="pid"-->
    <!--          placeholder="请选择电柜"-->
    <!--          @click="powerStatesLists(id)"-->
    <!--        >-->
    <!--          <el-option label="" value=""></el-option>-->
    <!--          <el-option-->
    <!--            v-for="item in findPowerStatesList"-->
    <!--            :key="item.id"-->
    <!--            :label="item.pname"-->
    <!--            :value="item.id"-->
    <!--          />-->
    <!--        </el-select>-->
    <!--        <el-select v-model="status" placeholder="请选择电池状态">-->
    <!--          <el-option label="未充满" value="0" :key="0"></el-option>-->
    <!--          <el-option label="充满未租" value="1" :key="1"></el-option>-->
    <!--          <el-option label="充满已租" value="2" :key="2"></el-option>-->
    <!--          <el-option label="维修" value="3" :key="3"></el-option>-->
    <!--          <el-option label="预约" value="4" :key="4"></el-option>-->
    <!--        </el-select>-->
    <!--        <el-button type="primary" @click="findAll">查询</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->
  </div>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="address" label="位置" />
      <el-table-column prop="pname" label="所属电柜" />
      <el-table-column prop="realName" label="所属用户" />
      <el-table-column prop="dname" label="电瓶编号" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="warning">交易成功</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="info">
            交易取消
          </el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">
            交易进行中
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="powerType" label="电池压">
        <template #default="scope">
          <el-tag v-if="scope.row.powerType === 0" type="warning">48V</el-tag>
          <el-tag v-else-if="scope.row.powerType === 1" type="success">
            60V
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!--    <el-dialog v-model="dialogVisible" title="Tips">-->
    <!--      <span>-->
    <!--        <el-form>-->
    <!--          <el-form-item>-->
    <!--            <el-radio-group v-model="findPowerStates.status">-->
    <!--              <el-radio :value="0" :label="0">未充满</el-radio>-->
    <!--              <el-radio :value="0" :label="1">充满未租</el-radio>-->
    <!--              <el-radio :value="0" :label="2">充满已租</el-radio>-->
    <!--              <el-radio :value="0" :label="3">维修</el-radio>-->
    <!--              <el-radio :value="0" :label="4">预约</el-radio>-->
    <!--            </el-radio-group>-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--      </span>-->
    <!--      <template #footer>-->
    <!--        <div class="dialog-footer">-->
    <!--          <el-button @click="dialogVisible = false">取消</el-button>-->
    <!--          <el-button type="primary" @click="updateStates">提交</el-button>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--    </el-dialog>-->
  </div>
  <!--  <div>-->
  <!--    <el-pagination-->
  <!--      :current-page="tableData.currents"-->
  <!--      :page-size="tableData.size"-->
  <!--      :page-sizes="[1, 2, 3, 4, 10, 100]"-->
  <!--      layout="total, sizes, prev, pager, next, jumper"-->
  <!--      :total="tableData.total"-->
  <!--      @size-change="handleSizeChange"-->
  <!--      @current-change="handleCurrentChange"-->
  <!--    />-->
  <!--  </div>-->
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  findId,
  managerList,
  midList,
  powerList,
  powerStatesList,
  updateState,
} from '@/api/manager'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { findBattery } from '@/api/battery'
const tableData = ref([])
const offsets = ref(1)
const pageSizes = ref(3)
const mid = ref()
const id = ref()
const pid = ref()
const status = ref()
const findPowerStates = ref()
const dialogVisible = ref(false)

// function showBattery(id){
//   router.push({
//     path: '/battery',
//     query: {
//       id: id
//     }
//   })
// }
// function handleEdit(id) {
//   findId(id).then(res => {
//     dialogVisible.value = true
//     findPowerStates.value = res.result
//   })
// }
// function updateStates() {
//   updateState(findPowerStates.value).then(res => {
//     if (res.code === 200) {
//       ElMessage.success('修改成功')
//       findAll()
//       dialogVisible.value = false
//     } else {
//       ElMessage.error('修改失败')
//     }
//   })
// }
// function handleSizeChange(val) {
//   console.log(`${val} items per page`)
//   pageSizes.value = val
//   findAll()
// }
// function handleCurrentChange(val) {
//   offsets.value = val
//   findAll()
//   console.log(`current page: ${val}`)
// }
function findAll() {
  let batteryId = JSON.parse(window.sessionStorage.getItem('batteryId'))
  console.log('batteryId==========', batteryId)
  findBattery(batteryId).then(res => {
    if (res.code === 200) {
      tableData.value = res.result
      console.log('status==========', status.value)
      console.log(res.result)
    }
  })
}
findAll()
</script>

<style scoped></style>
